<template>
  <b-page class="tzgj" :load="!loading">
    <div class="tzgj-content d-aic">
      <div class="d-jcc-aic tzgj-left">
        <div class="bhgj-logo-wrap">
          <img class="bhgj-logo" :src="current.logo">
        </div>
        <div class="bhgj-title">{{ current.title }}</div>
        <div class="bhgj-desc">{{ current.desc }}</div>
        <div class="bhgj-qrcode-wrap" :style="qrcodeStyle">
          <img class="bhgj-qrcode" :style="qrcodeStyle" :src="current.qrCode">
        </div>
        <div class="bhgj-scan" :style="{color:scanColor}">
          微信扫码登录
        </div>
      </div>
      <div class="tzgj-poster-wrap" :style="{backgroundColor:posterBg}">
        <img v-if="current.descPoster" class="tzgj-poster" :src="current.descPoster">
      </div>
    </div>
  </b-page>
</template>

<script>
    import bhjlQdcode from './assets/bhjl.jpg'
    import qldQdcode from './assets/qld.jpg'
    import bhhbQdcode from './assets/bhhb.png'
    import bhjlLogo from './assets/logo-bhjl.png'
    import qldLogo from './assets/logo-qld.png'
    import bhhbLogo from './assets/logo-bhhb.png'
    import bannerBhhb from './assets/bannerBhhb.jpg'
    // eslint-disable-next-line import/no-duplicates
    import bannerQld from './assets/bannerQld.jpg'
    // eslint-disable-next-line import/no-duplicates
    import bannerBhjl from './assets/bannerBhjl.jpg'
    export default {
        name: 'Tzgj',
        data () {
            return {
                loading: false,
                tzgj: {
                    bhhb: {
                        logo: bhhbLogo,
                        title: '朋友圈手机海报在线作图神器',
                        qrCode: bhhbQdcode,
                        desc: '在线海报一键生成 极简操作',
                        descPoster: bannerBhhb
                    },
                    bhjl: {
                        logo: bhjlLogo,
                        title: '社群开团做活动就用接龙工具',
                        qrCode: bhjlQdcode,
                        desc: '一键开团迅速传播，超高转化率',
                        descPoster: bannerBhjl
                    },
                    qld: {
                        logo: qldLogo,
                        title: '助力商业实体店做好周边生意',
                        qrCode: qldQdcode,
                        desc: '线下开店线上收款卖货两不误',
                        descPoster: bannerQld
                    }
                },
                current: { logo: '', title: '', qrCode: '', desc: '', descPoster: '' },
                scanColor: '',
                posterBg: '',
                qrcodeStyle: {
                    width: '110px',
                    height: '110px'
                }
            }
        },
        computed: {
            path () {
                const index = this.$route.path.lastIndexOf('/')
                return this.$route.path.substring(index + 1)
            }
        },
        mounted () {
            this.initData()
        },
        methods: {
            initData () {
                const s = this.path
                console.log(s)
                if (this.path !== 'bhhb') {
                    this.qrcodeStyle = {
                        width: '142px',
                        height: '142px'
                    }
                }
                switch (this.path) {
                    case 'qld':
                        this.posterBg = '#FFFBFB'
                        this.scanColor = '#E50014'
                        this.current = this.tzgj[this.path]
                        return
                    case 'bhjl':
                        this.posterBg = '#F0FEF7'
                        this.scanColor = '#14C167'
                        this.current = this.tzgj[this.path]
                        return
                    case 'bhhb':
                        this.posterBg = '#FFFAE3'
                        this.scanColor = '#FFCE00'
                        this.current = this.tzgj[this.path]
                }
                this.loading = true
            }
        }
    }
</script>

<style scoped lang="less">
    .tzgj {
        min-width: 1200px;
        .tzgj-content {
            margin-bottom: 90px;
            width: 1100px;
            height: 500px;
            border-radius: 4px;
            background-color: white;
            text-align: center;
            box-shadow: 0 2px 8px 0 rgba(51, 51, 51, .2);
            border: 1px solid white;
        }

        .tzgj-left {
            flex-direction: column;
            width: 285px;

            .bhgj-logo-wrap {
                width: 147px;
                height: 58px;

                .bhgj-logo {
                    width: 147px;
                    height: 58px;
                }
            }

            .bhgj-title {
                width: 168px;
                margin-top: 27px;
                color: rgba(40, 53, 66, 100);
                font-size: 24px;
            }

            .bhgj-desc {
                margin-top: 12px;
                color: rgba(83, 86, 90, 100);
                font-size: 14px;
            }

            .bhgj-qrcode-wrap {
                margin-top: 50px;
            }

            .bhgj-qrcode {
            }

            .bhgj-scan {
                margin-top: 30px;
                font-size: 18px;
            }
        }

        .tzgj-poster-wrap {
            width: 815px;
            height: 500px;

            .tzgj-poster {
                width: 815px;
                height: 500px;
            }
        }
    }
</style>
